<!--酒店区域-->
<template>
  <div>
    <div class="area-main clearfix">
      <div class="area-wrapper" id="_j_area_wrapper" style="display:none;">
        <dl class="item-area clearfix _j_area_list">
          <dt class="text-left">区域: </dt>
          <dd>
            <ul class="area-nav clearfix" style="margin-top: -4px">
              <li>
                <a href="#" class="_j_area_name" data-id="-1">全部</a>
              </li>
              <li v-for="item in area.items" :key="item.id">
                <a :href="item.hreflangs" class="_j_area_name" :data-id="item.dataid">{{item.address}}</a>
              </li>
            </ul>
            <span style="position: relative;left: -225px;top: 2px">
              <a class="toggle" href="#" style="display:none;" data-count="8">
                <i></i>
              </a>
            </span>
          </dd>
          <!--周边-->
          <dt class="text-left" style="margin-top: 10px">周边: </dt>
          <dd>
            <ul class="area-nav clearfix" style="margin-top: 6px">
              <li>
                <a href="#" target="_blank">海螺沟</a>

              </li>
              <li>
                <a href="#" target="_blank">西岭雪山</a>

              </li>
            </ul>
          </dd>

        </dl>

        <!--攻略-->
        <dl class="item-info clearfix _j_area_desc_list text-left">
          <dt style="display:none;">攻略: </dt>
          <span v-for="item in area.items" :key="item.id">
            <dd :data-id="item.dataid" style="display:none;">
            <div>
              <p>
                <em>{{item.figure}}</em>的游客选择&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                共<em>{{item.some}}</em>家酒店
              </p>
              <p>{{item.content}}</p>
            </div>
          </dd>
          </span>

          <dd data-id="55365" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54000" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="53997" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54069" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54036" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54057" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54048" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54030" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54015" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="53988" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54024" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54042" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54033" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54066" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54075" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54021" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="54078" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="53973" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="53982" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="0" style="display:none;">
            <div>
              <p></p>
            </div>
          </dd>
          <dd data-id="-1" style="display:none;">
            <div>
              <p v-html="area.describes"></p>
            </div>
          </dd>
        </dl>

        <!--均价-->
        <dl class="item-price clearfix _j_area_price_list">
          <dt data-id="" style="display:none;">均价
            <sup class="warn-mark">
              <span class="warn-mark-icon"></span>
              <span class="warn-tips">等级均价由平日价格计算得出，节假日价格会有上浮。<i></i></span>
            </sup>:</dt>
          <dd data-id="30" style="display:none;">
            <ul class="clearfix">
              <li><span class="hotel-rate rate3"></span>￥188</li>
              <li><span class="hotel-rate rate4"></span>￥309</li>
              <li><span class="hotel-rate rate5"></span>￥597</li>
            </ul>
          </dd>
          <dd data-id="28" style="display:none;">
            <ul class="clearfix">
              <li><span class="hotel-rate rate3"></span>￥276</li>
              <li><span class="hotel-rate rate4"></span>￥389</li>
              <li><span class="hotel-rate rate5"></span>￥703</li>
            </ul>
          </dd>
          <dd data-id="33" style="display:none;">
            <ul class="clearfix">
              <li><span class="hotel-rate rate3"></span>￥206</li>
              <li><span class="hotel-rate rate4"></span>￥252</li>
              <li><span class="hotel-rate rate5"></span>￥542</li>
            </ul>
          </dd>
          <dd data-id="2610" style="display:none;">
            <ul class="clearfix">
              <li><span class="hotel-rate rate3"></span>￥164</li>
              <li><span class="hotel-rate rate4"></span>￥249</li>
              <li><span class="hotel-rate rate5"></span>￥408</li>
            </ul>
          </dd>
          <dd data-id="1881" style="display:none;">
            <ul class="clearfix">
              <li><span class="hotel-rate rate3"></span>￥240</li>
              <li><span class="hotel-rate rate4"></span>￥320</li>
              <li><span class="hotel-rate rate5"></span>￥453</li>
            </ul>
          </dd>
          <dd data-id="25" style="display:none;">
            <ul class="clearfix">
              <li><span class="hotel-rate rate3"></span>￥173</li>
              <li><span class="hotel-rate rate4"></span>￥315</li>
              <li><span class="hotel-rate rate5"></span>￥694</li>
            </ul>
          </dd>
          <dd data-id="26" style="display:none;">
            <ul class="clearfix">
              <li><span class="hotel-rate rate3"></span>￥234</li>
              <li><span class="hotel-rate rate4"></span>￥349</li>
              <li><span class="hotel-rate rate5"></span>￥865</li>
            </ul>
          </dd>
          <dd data-id="11518" style="display:none;">
            <ul class="clearfix">
              <li><span class="hotel-rate rate3"></span>￥239</li>
              <li><span class="hotel-rate rate4"></span>￥333</li>
            </ul>
          </dd>
          <dd data-id="-1" style="display:none;">
            <ul class="clearfix">
              <li><span class="hotel-rate rate3"></span>￥242</li>
              <li><span class="hotel-rate rate4"></span>￥357</li>
              <li><span class="hotel-rate rate5"></span>￥658</li>
            </ul>
          </dd>
        </dl>

      </div>


      <div class="area-wrapper" id="_j_region_wrapper" style="display:none;">
        <dl class="item-info clearfix  _j_region_desc_list">
          <dt style="display:none;">攻略: </dt>
          <dd data-id="-1" style="display:none;">
            <div class="item_count">
              <p>
                崇明岛，中国的第三大岛，被誉为“长江门户、东海瀛洲”。<br/>
                崇明岛地势平坦，如同江南田地，初到这里，甚至感觉不到已到了岛上。<br/>
                一片片绿油油的庄稼、一道道灌溉用的水渠，村落密布，道路交错。
              </p>
            </div>
          </dd>
        </dl>
      </div>

      <!--地图定位地址-->
      <div class="area-maps" id="_j_map">
        <a class="map-link" href="#" target="_blank">通过地图查找酒店</a>
        <div class="map-container"></div>
      </div>

    </div>
  </div>
</template>

<script type="text/javascript"
  src="https://webapi.amap.com/maps?v=1.4.15&key=6f4d7c0b44bac2fc6eeb890ac08a62a6">
</script>

<script>
// import $ from "jquery";
export default {
  props: ["area"],
  data() {
    return {};
  },
  mounted() {
    this.Gdmap();
  },
  methods: {
    Gdmap() {
      var map = new AMap.Map("container");
      var map = new AMap.Map("container", {
        zoom: 10,     //设置地图的缩放级别
        //中心点坐标
        center: [this.$store.state.left, this.$store.state.right]
      });
      AMap.plugin(["AMap.Scale"], function() {
        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale());
      });
    }
  }
};
</script>

<style scoped>
.text-left{
  text-align: left;
}
</style>
